<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<!--顶部导航-->
		<uni-nav-bar left-icon="back" :fixed="true" :statusBar="true" title="物流详情" backgroundColor="transparent" :border="false"></uni-nav-bar>
		
		<view class="goods_box">
			<view class="goods_img_box">
				<image class="img_goods" src="../../static/logo.png" ></image>
			</view>
			
			<view class="goods_info_box">
				<text class="wuliu_status">物流状态：已发货</text>
				
				<view class="danhao_box">
					<text class="wuliu_danhao">百世快递：2348453566666</text>
					<text class="copy_buton">复制</text>
				</view>
				
				<text class="address_info">广东省 广州市 天河区 汉溪大道东362号粤海广场写字楼</text>
			</view>
		</view>
		
		
		<view class="line"></view>
		
		
		<view style="height: 30upx;"></view>
		
		<view class="wuliu_box_info_de">
			<view class="wuliu_xian_box_img">
				<view class="status_box_img">
					<image class="show_img" src="../../static/img/wuliu/choose1.png"></image>
				</view>
				<view class="xuxian"></view>
			</view>
			
			<view class="wuliu_text_box">
				<view class="wuliu_text_up">
					<text class="wuliu_sta_text">已签收</text>
					<text class="wuliu_sta_time">07-12 20:30:23</text>
				</view>
				<text class="wuliu_de_info">您已成功签收该商品，期待再次为您服务</text>
			</view>
		</view>
		
		<view class="wuliu_box_info_de">
			<view class="wuliu_xian_box_img">
				<view class="status_box_img">
					<image class="show_img" src="../../static/img/wuliu/choose1.png"></image>
				</view>
				<view class="xuxian"></view>
			</view>
			
			<view class="wuliu_text_box">
				<view class="wuliu_text_up">
					<text class="wuliu_sta_text">已签收</text>
					<view class="wuliu_sta_time">07-12 20:30:23</view>
				</view>
				<text class="wuliu_de_info">您已成功签收该商品，期待再次为您服务</text>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.goods_box{
		width: 698upx;
		height: 250upx;
		display: flex;
		margin: 0 28upx;
		padding: 25upx 0;
		box-sizing: border-box;
		margin-top: 20upx;
	}
	.goods_img_box{
		width: 200upx;
		height: 200upx;
	}
	.img_goods{
		width: 200upx;
		height: 200upx;
	}
	.goods_info_box{
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.wuliu_status{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.danhao_box{
		margin-top: 12upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wuliu_danhao{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
		
	}
	.copy_buton{
		width: 72upx;
		height: 36upx;
		text-align: center;
		border: 1upx solid #6EC5FF;
		color: #5ABDFF;
		font-size: 24upx;
		box-sizing: border-box;
	}
	.address_info{
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 34upx;
		margin-top: 32upx;
	}
	.line{
	    width: 698upx;
	    height: 4upx;
	    background: #F7F7F7;
	    margin: 0 24upx 0 28upx;
	    margin-top: 24upx;
		box-sizing: border-box;
	}
	.status_box_img{
		width: 40upx;
		height: 40upx;
	}
	.show_img{
		width: 40upx;
		height: 40upx;
	}
	.wuliu_box_info_de{
		/* background-color: #007AFF; */
		margin: 0 24upx 0 28upx;
		display: flex;
	}
	.wuliu_xian_box_img{
		height: 124upx;
		/* background-color: #FFC28D; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.xuxian{
		height: 84upx; 
		border-left: 2upx dashed #979797;
		opacity: 0.5;
		float: left;
		/* background-color: #FFFFFF; */
		box-sizing: border-box;
	}
	
	.wuliu_text_box{
		margin-left: 24upx;
	}
	.wuliu_text_up{
		display: flex;
		align-items: baseline;
	}
	.wuliu_sta_text{
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #58BCFF;
		text-align: center;
	}
	.wuliu_sta_time{
		margin-left: 12upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #58BCFF;
		display: flex;
		vertical-align:bottom;		
	}
	.wuliu_de_info{
		margin-top: 12upx;
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #58BCFF;
		line-height: 24upx;
	}
</style>
